<template>
	<view class="total">
		<view>
			<view class="search">
				<view>
					<input class="search_text">
				</view>
			</view>
			<view class="search_condition">
				<view class="search_condition_view1">
					<text class="search_condition_text1">最近</text>
				</view>
				<view class="search_condition_view2">
					<text class="search_condition_text2">最热</text>
				</view>
				<view class="search_condition_view3">
					<text class="search_condition_text3">金额</text>
				</view>
			</view>
			<view v-for="(item,index) in 10" :key="index">
				<view class="parttime_view_total">
					<view class="parttime_view_top">
						<view class="parttime_view_top_full"></view>
					</view>
					<view class="parttime_view_title">
						<text class="parttime_view_title_text">打字</text>
						<text class="parttime_view_title_money">20/天</text>
					</view>
					<view class="parttime_view_content">
						<text class="parttime_view_content_text">长医工作室</text>
					</view>
					<view class="parttime_view_tail">
						<view class="parttime_view_tail_class">日结</view>
						<view class="parttime_view_tail_time">12:00-13:00</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.total{
		background-color: #fff;
	}
	
	.search {
		margin-right: 10rpx;
		margin-left: 10rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		border-style: solid;
		height: 65rpx;
	}

	.search_text {
		background-color: #fff;
		border-radius: 30rpx;
		text-align: center;
		vertical-align: middel;
	}

	.search_condition {
		height:60rpx;
	}

	.search_condition_view1 {
		float: left;
		width: 150rpx;
		margin-left: 50rpx;
		margin-top: 10rpx;
		margin-right: 50rpx;
		border-style: solid;
		border-width: 2rpx;
		border-radius: 30rpx;
		border-color: #ff33cc;
	}

	.search_condition_text1 {
		position: relative;
		left: 45rpx;
		color: #ff33cc;
	}
	.search_condition_view2 {
		float: left;
		width: 150rpx;
		margin-left: 50rpx;
		margin-top: 10rpx;
		margin-right: 50rpx;
		border-style: solid;
		border-width: 2rpx;
		border-radius: 30rpx;
		border-color: #ff0000;
	}
	
	.search_condition_text2 {
		position: relative;
		left: 45rpx;
		color: #ff0000;
	}
	.search_condition_view3 {
		float: left;
		width: 150rpx;
		margin-left: 50rpx;
		margin-top: 10rpx;
		margin-right: 50rpx;
		border-style: solid;
		border-width: 2rpx;
		border-radius: 30rpx;
		border-color: #cccc33;
	}
	
	.search_condition_text3 {
		position: relative;
		left: 45rpx;
		color: #cccc33;
	}
	
	.parttime_view_total{
		margin: 10rpx;
		border-radius: 27rpx;
		border-width: 1px;
		height: 210rpx;
		border-style: solid;
	}
	
	.parttime_view_top{
		height: 50rpx;
		background-color: #1CBBB4;
		border-radius: 50rpx;
	}
	
	.parttime_view_top_full{
		position: relative;
		top: 25rpx;
		height: 30rpx;
		background-color: #1CBBB4;
	}
	
	.parttime_view_title{
		height: 50rpx;
		background-color: #99ff99;
	}
	
	.parttime_view_title_text{
		font-size:30rpx;
		font-weight:bold;
		float: left;
		margin-left: 20rpx;
	}
	
	.parttime_view_title_money{
		font-size:30rpx;
		float: right;
		color: #FFAA00;
		margin-right: 20rpx;
	}
	
	.parttime_view_content{
		height: 40rpx;
	}
	
	.parttime_view_content_text{
		font-size:28rpx;
	}
	
	.parttime_view_tail{
		height: 40rpx;
	}
	
	.parttime_view_tail_class{
		height: 40rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #929292;
		border-radius: 20rpx;
		float: left;
		margin: 20rpx;
		background-color: #4CD964;
	}
	
	.parttime_view_tail_time{
		height: 40rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #929292;
		border-radius: 20rpx;
		float: left;
		margin: 20rpx;
		background-color: #ffaa00;
	}
</style>
